import { useParams } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { getDetail } from '../../api'
import MyMap from '../../component/MyMAp'
import { Map, APILoader, useMap } from '@uiw/react-baidu-map';


const Detail = () => {
    const params = useParams()

    // 判断当前id 是否存在与本都存储
    const [isCollect, setCollect] = useState(false)

    const [info, setInfo]: any = useState({})

    console.log(params)

    useEffect(() => {

        getDetail({ id: params.id }).then(res => {
            // 判断本地存储的值中有没有当前的id
            let collectList: any = localStorage.getItem('collectList')

            // 如果我本地存储里有数据
            if (collectList) {
                // 将数组转换化成数组
                collectList = JSON.parse(collectList)

                // 通过转化而来的数据 判断当前详情页id 是否存在与本地存储中
                setCollect(collectList.some((item: any) => item === res.data.id))
            }

            setInfo(res.data)
        })
    }, [])

    // 收藏
    const addCollect = () => {
        // 获取本地存储的数据
        let collectList: any = localStorage.getItem('collectList')

        // 判断如果有值
        if (collectList) {
            // 将字符串转成数组
            collectList = JSON.parse(collectList)

            // 判断值 是否存在与本地存储
            if (isCollect) {
                collectList = collectList.filter((item: string) => item !== info.id)
            } else {
                // 给数组添加当前id
                collectList.push(info.id)
            }

        } else {
            collectList = [info.id]
        }

        // 将数据保存到本地
        localStorage.setItem('collectList', JSON.stringify(collectList))

        // 取消或者搜藏
        setCollect(!isCollect)
    }


    return <div>
        <div>
            名称： {info.title}
            <div>
                图片：<img src={info.img} alt="" />
            </div>
            <button onClick={() => addCollect()} >{isCollect ? '取消搜藏' : '搜藏'}</button>
            <div>
                地址：{info.city}
                <div style={{ width: '100%' }}>
                    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
                        <MyMap address={info.city} />
                    </APILoader>
                </div>
            </div>
        </div>
    </div>
}

export default Detail